<template>
    <div class="SpecialIndexJob">
        <!-- 头部 -->
		<Header :navActive="1" ref="Header"/>
		<!-- 主内容区 -->
		<div class="main cl">
            <!-- 背景图 -->
            <div class="banner"><img :src="info.imageFileId_dictText"></div>
            <!-- 导航 -->
            <div class="nav">
                <router-link tag="div" :to="{name:'SpecialIndexJob',query:{id:this.id}}" class="item active">空中双选</router-link>
                <router-link tag="div" :to="{name:'SpecialIndex',query:{id:this.id}}" class="item">活动介绍</router-link>
                <router-link v-show ="id =='1552832466132377601'" tag="div" :to="{name:'specialIndexLiveCommerce',query:{id:this.id}}" class="item">直播带岗</router-link>
            </div>
            <!-- 搜索框 -->
			<div class="searchBox">
				<div class="search">
					<div class="inputBox fl"><input v-model.trim="search.title" type="text" autocomplete="off" placeholder="请输入职位名称或企业名称"/></div>
					<el-button type="primary" class="btn fr" @click="searchClick">搜索</el-button>
				</div>
			</div>
            <!-- 筛选 -->
            <div class="filter w1200">
                <div class="row" v-for="(item,index) in filter" :key="index">
                    <!-- 城市 -->
                    <template v-if="item.id=='1330751004775944193'">
                        <div class="label">{{item.name}}</div>
                        <div class="list">
                            <span :class="filterActive[index].id==''?'active':''" @click="selectFilter(index,'')">不限</span>
                            <span v-for="(x,y) in item.blockData" :key="y" :class="filterActive[index].id==x.sourceId?'active':''" @click="selectCity(index,y,x.sourceId)">{{x.title}}
                                <i :class="filterActive[index].id==x.sourceId&&jobCityChild.length>0&&filterActive[index].childrenActive?'el-icon-arrow-down active':'el-icon-arrow-down'"></i>
                            </span>
                            <div class="dlist" v-if="jobCityChild.length>0&&filterActive[index].childrenActive">
                                <div class="ditem" :class="jobCity2Active==''?'active':''" @click="selectCity2(index,'')">不限</div>
                                <div class="ditem" v-for="(item,index) in jobCityChild" :key="index" :class="jobCity2Active==item.value?'active':''" @click="selectCity2(index,item.value)">{{item.label}}</div>
                            </div>
                        </div>
                    </template>
                    <template v-else>
                        <div class="label">{{item.name}}</div>
                        <div class="list">
                            <span :class="filterActive[index].id==''?'active':''" @click="selectFilter(index,'')">不限</span>
                            <span v-for="(x,y) in item.blockData" :key="y" :class="filterActive[index].id==x.sourceId?'active':''" @click="selectFilter(index,x.sourceId)">{{x.title}}</span>
                        </div>
                    </template>
                </div>
            </div>
            <!-- 列表 -->
            <div class="list w1200">
                <div class="item" v-for="(item,index) in list" :key="index">
                    <router-link :to="{name:'JobDetails',query:{id:item.id}}" target="_blank">
                        <div class="title">{{item.title}}
                            <span>发布时间：{{
                                $moment(item.publishTime, "yyyy-MM-DD HH:mm:ss").format("yyyy-MM-DD")
                                }}
                            </span>
                        </div>
                        <div class="other">
                            <div class="money">{{item.minMoney === 0 && item.maxMoney === 0 ? '薪资面议' : item.money}}</div>
                            <!--<div class="money">{{item.money}}</div>-->
                            <div class="spans">
                                <span>{{item.jobCity_dictText}}</span>
                                <span>{{item.eduLevel_dictText}}</span>
                                <span>{{item.experience}}</span>
                                <span>{{item.needCount}}人</span>
                            </div>
                        </div>
                        <div class="company">
                            <div class="text fl">
                                <div class="companyName">{{item.companyName}}</div>
                                <div class="companyOther">
                                    <span>{{item.enNature}}</span>
                                    <span v-if="item.enPersonnel_dictText">{{item.enPersonnel_dictText}}</span>
                                </div>
                            </div>
                            <div class="logo fr">
                                <img :src="item.companyLogo_dictText">
                            </div>
                        </div>
                        <div class="fu">
                            <span v-for="(x,y) in item.companyBenefits" :key="y">{{x}}</span>
                        </div>
                    </router-link>
                    <div class="hover">
                        <el-button type="primary" class="submit" @click="SendResume(item.id)">申请职位</el-button>
                        <el-button type="text" icon="el-icon-star-off" class="collect" @click="collectionDelete(item.id)" v-if="item.collectState==0">取消收藏</el-button>
                        <el-button type="text" icon="el-icon-star-off" class="collect" @click="collectionAdd(item.id)" v-else>收藏职位</el-button>
                    </div>
                </div>
            </div>
            <!-- 暂无数据 -->
            <nodata v-if="list.length==0" />
            <el-pagination background layout="prev, pager, next" hide-on-single-page :current-page="pageNo" :page-size='pageSize' :total="pageTotal" @current-change="handleCurrentChange"></el-pagination>
		</div>
        <!-- 底部 -->
		<Footer />
    </div>
</template>

<script>
    import {specialDetail,block,baseSearch,collectStateList,collectionDelete,collectionAdd,baseData} from '@/api/api'
	import Header from '@/components/Header.vue'
    import Footer from '@/components/Footer.vue'
    import nodata from '@/components/nodata.vue'
	export default {
		//组件注入
		components: {Header,Footer,nodata},
        //存放数据
        data() {
            return {
                id:'',
                info:{},
                filter:[],
                filterActive:[],
                search:{
                    title:'',//搜索内容
                    jobCity:'',//工作地点
                    eduLevel:'',//学历要求
                    enNature:'',//公司性质
                    enPersonnel:'',//公司规模
                    jobProvince: ''
                },
                city:[],//所有城市
                jobCityChild:[],//城市二级
                jobCity2Active:'',//城市二级active
                list:[],
                pageNo:1,
                pageSize:10,
                pageTotal:1,//总数
                canSend:true,//未开始 已结束专场不能投递
            }
        },
        //接受父组件传递的值
        props:[],
        //监控data中的数据变化
        watch: {},
        //方法集合
        methods: {
            //搜索
            searchClick(){
                this.clearList()
                this.getList()
            },
            //筛选条件
            selectFilter(index,id){
                this.filterActive[index].id = id;
                if(index==0){
                    this.search.jobCity = id
                    if(id==''){
                        this.jobCityChild = []
                    }
                }
                if(index==1){
                    this.search.eduLevel = id
                }
                if(index==2){
                    this.search.enNature = id
                }
                if(index==3){
                    this.search.enPersonnel = id
                }
                this.clearList()
                this.getList()
            },
            //选择城市一级
            selectCity(parIndex,index,id){
                console.log(id,'123')
                console.log(this.filterActive[parIndex].id,'123456')
                if(this.filterActive[parIndex].id!=id){
                    this.filterActive[parIndex].childrenActive = true;
                    this.search.jobCity = id
                    this.jobCity2Active = ''
                    this.clearList()
                    this.getList()
                }else{
                    this.filterActive[parIndex].childrenActive = !this.filterActive[parIndex].childrenActive;
                }
                // this.filterActive[parIndex].id = id;
                // for(let i in this.city){
                //     for(let x in this.city[i].children){
                //         if(id==this.city[i].children[x].value){
                //             this.jobCityChild = this.city[i].children[x].children
                //         }
                //     }
                // }
                this.filterActive[parIndex].id = id;
                for(let i in this.city){
                    //110000 北京市 120000 天津市 310000 上海市 500000-重庆市
                    let cityid='';
                    if('110000'==id||'120000'==id||'310000'==id||'500000'==id){
                      //  console.log("直辖市特殊处理  dfdsf" )

                        if(id==this.city[i].value){
                         try {
                             this.jobCityChild = this.city[i].children[0].children
                         }catch (e) {
                             console.log("获取直辖市异常")
                         }
                        }

                    }else  if(id==this.city[i].value){
                        this.jobCityChild = this.city[i].children
                    }

                }
            },
            //选择城市二级
            selectCity2(parIndex,id){
                if(id==''){
                    this.search.jobCity = this.filterActive[parIndex].id
                }else{
                    this.search.jobCity = id
                }
                this.jobCity2Active = id
                this.clearList()
                this.getList()
            },
            //投递简历
            SendResume(id){
                if(this.canSend){
                    this.$refs.Header.SendResumeFlag = true
                    this.$refs.Header.JobId = id
                }else{
                    this.$message.error('专场未开始或已结束，不能投递简历');
                }
            },
            //收藏职位
            collectionAdd(id){
                if(this.userLoginFlag()){
                    collectionAdd({
                        'jobId': id
                    }).then(res =>{
                        if(res.code==200){
                            this.$message.success('收藏成功');
                            for(let i in this.list){
                                if(this.list[i].id==id){
                                    this.list[i].collectState = 0
                                }
                            }
                        }else{
                            this.$message.error(res.message);
                        }
                    });
                }
            },
            //取消收藏职位
            collectionDelete(id){
                if(this.userLoginFlag()){
                    collectionDelete({
                        'id': id
                    }).then(res =>{
                        if(res.code==200){
                            this.$message.success('取消收藏成功');
                            for(let i in this.list){
                                if(this.list[i].id==id){
                                    this.list[i].collectState = 1
                                }
                            }
                        }else{
                            this.$message.error(res.message);
                        }
                    });
                }
            },
            //清空列表
            clearList(){
                this.pageNo = 1
                this.list = []
            },
            //获取列表
            getList(){
                baseSearch({
                    'type':'job',
                    'title.keywords,companyName.keywords':this.search.title,//搜索内容
                    'jobProvince.term': this.search.jobCity,//工作地点
                    'eduLevel.term': this.search.eduLevel,//学历要求
                    'enNature.term': this.search.enNature,//公司性质
                    'enPersonnel.term': this.search.enPersonnel,//公司规模
                    'sessionId.term':this.id,//专场id
                    //'bsType.keywords':1,//专场职位搜索
                    'pageNo':this.pageNo,
                    'pageSize':this.pageSize,
                    'field': this.fieldType,//排序字段 intellect 智能排序
                    'sort': false,//排序方式 true:正序 false:倒序
                }).then(res =>{
                    if(res.code==200){
                        this.pageTotal = res.result.total
                        let list = res.result.records
                        for(let i in list){
                            list[i].money = list[i].minMoney/1000 + 'K-' + list[i].maxMoney/1000 + 'K'
                            if(list[i].minExperience==0&&list[i].maxExperience==0){
                                list[i].experience = '无经验'
                            }else if(list[i].minExperience==0&&list[i].maxExperience==999){
                                list[i].experience = '不限'
                            }else if(list[i].minExperience==null&&list[i].maxExperience==null){
                                list[i].experience = '无经验'
                            }else{
                                list[i].experience = list[i].minExperience + '-' + list[i].maxExperience + '年'
                            }
                        }
                        //判断登录状态 查询收藏状态
                        if(list.length>0&&this.userLoginFlag1()){
                            let ids = ''
                            for(let i in list){
                                ids += list[i].id + ','
                            }
                            //收藏状态
                            collectStateList({
                                'jobId': ids
                            }).then(res =>{
                                if(res.code==200){
                                    for(let i in res.result){
                                        list[i].collectState = res.result[i].collectState
                                    }
                                    this.list = list
                                }
                            });
                        }else{
                            this.list = list
                        }
                    }
                });
            },
            //切换页码
            handleCurrentChange(pageNo){
                this.pageNo = pageNo
                this.list = []
                this.getList();
            },
        },
        //生命周期 - 创建完成（可以访问当前this实例）
        created() {

        },
        //生命周期 - 挂载完成（可以访问DOM元素）
        mounted() {
            this.id = this.$route.query.id
            //专场详情
			specialDetail({
				'id': this.id
			}).then(res =>{
				if(res.code==200){
                    this.info = res.result
                    let nowDate = new Date().getTime()
                    let itemDate1 = new Date(this.info.startTime).getTime()
                    let itemDate2 = new Date(this.info.endTime).getTime()
                    if(nowDate>itemDate1&&nowDate<itemDate2){
                        this.canSend = true
                    }else{
                        this.canSend = false
                    }
				}
            });
            //获取筛选条件
            block({
				'code':'search'
			}).then(res =>{
				if(res.code==200){
                    let arr = res.result.children
                    for(let i in arr){
                        if(arr[i].name=='工作地点'||arr[i].name=='学历要求'||arr[i].name=='公司性质'||arr[i].name=='公司规模'){
                            this.filter.push(arr[i])
                            this.filterActive.push({id:"",childrenActive:false})
                        }
                    }
                    //城市列表
                    baseData({
                        'clz':'area'
                    }).then(res =>{
                        if(res.code==200){
                            this.city = res.result
                        }
                    });
				}
            });
            this.getList()
        },
    };
</script>
<style lang="scss">
    @mixin text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    @mixin text-ellipsisclamp($clamp){display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: $clamp;overflow: hidden;}
    @mixin transition{transition: all .3s;}
    .SpecialIndexJob{background: #F6F6F6;
        .main{padding-bottom: 40px;
            .banner{width: 100%;height: 500px;
                img{width: 100%;height: 100%;}
            }
            .nav{height: 60px;line-height: 60px;background: #fff;text-align: center;
                .item{display: inline-block;font-size: 18px;color: #666;padding: 0 50px;margin: 0 70px;cursor: pointer;position: relative;@include transition();
                    &:after{content: "";width: 0;height: 3px;background: #E54437;position: absolute;left: 0;bottom: 0;right: 0;margin: auto;@include transition()}
                    &.active,&:hover{color: #E54437;
                        &:after{width: 100%;}
					}
					&.active{font-weight: bold;}
                }
            }
            /* 搜索 */
            .searchBox{width: 850px;height: auto;overflow: hidden;margin: 30px auto;
                .jobs{font-size: 16px;color: #333;margin: 0 0 10px 15px;}
                .search{height: 55px;background: #fff;position: relative;
                    .inputBox{width: 660px;margin-left: 20px;position: relative;z-index: 1;top: 2px;
                        input{width: 100%;height: 51px;line-height: 51px;font-size: 16px;}
                    }
                    .btn{width: 175px;height: 55px;line-height: 55px;font-size: 16px;color: #fff;font-weight: bold;text-align: center;@include transition();position: absolute;right: 0;top: 0;z-index: 1;}
                    &:before{content: "";width: 100%;height: 100%;border:2px solid #E54437;position: absolute;left: 0;top: 0;z-index: 0;}
                }
            }
            .filter{height: auto;overflow: hidden;background: #fff;padding: 30px;margin-bottom: 30px;position: relative;
                .row{height: auto;overflow: hidden;margin-bottom: 10px;
                    .label{width: 60px;line-height: 28px;float: left;font-size: 14px;color: #999;}
                    .list{width: 1080px;height: auto;overflow: hidden;float: left;
                        span{height: 28px;line-height: 28px;font-size: 14px;color: #333;padding: 0 12px;border-radius: 3px;display: inline-block;margin: 0 0 10px 10px;cursor: pointer;@include transition();
                            &:hover{color: #E54437;}
                            &.active{background: #E54437;color: #fff;
                                i.active{transform: rotate(180deg);}
                            }
                            i{font-size: 10px;margin-left: 5px;vertical-align: 1px;}
                        }
                        .dlist{background: #f6f6f6;margin: 0 0 10px 10px;padding: 20px 10px 10px;
                            .ditem{line-height: 28px;font-size: 14px;color: #333;padding: 0 12px;border-radius: 3px;display: inline-block;margin: 0 0 10px 10px;cursor: pointer;@include transition();
                                &:hover{color: #E54437;}
                                &.active{background: #E54437;color: #fff;}
                            }
                        }
                    }
                    &:last-child{margin: 0;}
                }
            }
            /* 列表 */
            .list{height: auto;overflow: hidden;background: #fff;
                .item{height: auto;overflow: hidden;padding: 20px;display: block;border-bottom: 1px solid #eee;position: relative;
                    a{display: block;}
                    .title{font-size: 16px;color: #333;font-weight: bold;
                        span{font-size: 14px;color: #999;margin-left: 20px;font-weight: normal;}
                    }
                    .other{height: auto;overflow: hidden;margin-top: 13px;
                        .money{font-size: 20px;color: #E72618;float: left;margin-right: 35px}
                        .spans{height: auto;overflow: hidden;
                            span{font-size: 14px;color: #666666;position: relative;padding-right: 12px;margin-left: 12px;
                                &:after{content: "";width: 1px;height: 12px;background: #e8e8e8;position: absolute;right: 0;top: 2px;}
                                &:first-child{margin: 0;}
                                &:last-child:after{display: none;}
                            }
                        }
                    }
                    .company{height: auto;overflow: hidden;position: absolute;right: 30px;top: 35px;
                        .text{height: auto;overflow: hidden;margin-right: 23px;text-align: right;
                            .companyName{font-size: 14px;color: #666;font-weight: bold;@include text-ellipsis()}
                            .companyOther{margin-top: 5px;
                                span{font-size: 13px;color: #666;position: relative;padding-left: 12px;margin-left: 12px;
                                    &:after{content: "";width: 1px;height: 12px;background: #e8e8e8;position: absolute;left: 0;top: 3px;}
                                    &:first-child{margin: 0;}
                                    &:first-child:after{display: none;}
                                }
                            }
                        }
                        .logo{width: 105px;height: 45px;overflow: hidden;
                            img{width: 100%;height: 100%;}
                        }
                    }
                    .fu{height: 25px;overflow: hidden;margin-top: 15px;
                        span{font-size: 12px;color: #74767A;border: 1px solid #eee;padding: 2px 8px 3px;margin: 0 0 8px 8px;background: #F9F9F9;float: left;
                            &:first-child{margin: 0;}
                        }
                    }
                    .hover{width: 400px;height: 100%;padding: 50px 0;position: absolute;background: #fff;right: 0;top: 0;display: none;
                        .el-button{height: 40px;padding: 0 20px;float: right;margin-right: 30px;border-radius: 5px !important;}
                        .collect{color: #999;@include transition();
                            i{font-size: 18px;vertical-align: -1px;}
                            &:hover{color: #E54437;}
                        }
                    }
                    &:hover{
                        .hover{display: block;}
                    }
                }
            }
        }
    }
</style>
